<extend name="Layout/application"/>

<block name="content">
   <section class="content-header">
      <h1>
         后台首页
         <small>Admin index</small>
      </h1>
      <ol class="breadcrumb">
         <li><a href="#"><i class="fa fa-dashboard"></i> Admin</a></li>
         <li class="active">Index</li>
      </ol>
   </section>
   <section class="content">
      <!-- Small boxes (Stat box) -->
      <div class="row">
         <div class="col-lg-3 col-xs-6">
            <!-- small box -->
            <div class="small-box bg-aqua">
               <div class="inner">
                  <h3>150</h3>

                  <p>New Orders</p>
               </div>
               <div class="icon">
                  <i class="ion ion-bag"></i>
               </div>
               <a href="#" class="small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a>
            </div>
         </div>
         <!-- ./col -->
         <div class="col-lg-3 col-xs-6">
            <!-- small box -->
            <div class="small-box bg-green">
               <div class="inner">
                  <h3>53<sup style="font-size: 20px">%</sup></h3>

                  <p>Bounce Rate</p>
               </div>
               <div class="icon">
                  <i class="ion ion-stats-bars"></i>
               </div>
               <a href="#" class="small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a>
            </div>
         </div>
         <!-- ./col -->
         <div class="col-lg-3 col-xs-6">
            <!-- small box -->
            <div class="small-box bg-yellow">
               <div class="inner">
                  <h3>44</h3>

                  <p>User Registrations</p>
               </div>
               <div class="icon">
                  <i class="ion ion-person-add"></i>
               </div>
               <a href="#" class="small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a>
            </div>
         </div>
         <!-- ./col -->
         <div class="col-lg-3 col-xs-6">
            <!-- small box -->
            <div class="small-box bg-red">
               <div class="inner">
                  <h3>65</h3>

                  <p>Unique Visitors</p>
               </div>
               <div class="icon">
                  <i class="ion ion-pie-graph"></i>
               </div>
               <a href="#" class="small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a>
            </div>
         </div>
         <!-- ./col -->
      </div>
      <!-- /.row -->

      <div class="row">
         <!-- Left col -->
         <section class="col-lg-8 connectedSortable">
            <div class="nav-tabs-custom">

               <div id="customer_count" style="width: 100%;height:399px;"></div>

            </div>
         </section>
         <!-- /.Left col -->
         <!-- right col (We are only adding the ID to make the widgets sortable)-->
         <section class="col-lg-4 connectedSortable">
            <div class="box box-solid">

               <div id="customer_total" style="width: 100%;height:399px;"></div>

            </div>
         </section>
         <!-- right col -->
      </div>

   </section>
</block>

<block name="js">
   <script>
      $(function () {
         //网销客资统计
         var customer_count = echarts.init(document.getElementById('customer_count'));
         customer_count.showLoading();  //加载动画
         $.get('/admin/index/customer_count').done(function (data) {
            customer_count.hideLoading();  //加载后隐藏

            customer_count.setOption({
               title: {
                  text: '客资统计'
               },
               tooltip: {},
               legend: {
                  data: ['客资数']
               },
               xAxis: {
                  data: data.names
               },
               yAxis: {},
               series: [{
                  name: '客资数',
                  type: 'bar',
                  data: data.datas
               }]
            });
         });
      });

      //网销客资成交率统计
      var customer_total = echarts.init(document.getElementById('customer_total'));
      customer_total.showLoading();  //加载动画
      $.get('/admin/index/customer_total').done(function (data) {
         customer_total.hideLoading();  //加载后隐藏

         customer_total.setOption({
            title: {
               text: '客资成交率统计',
               subtext: '真实数据',
               x: 'center'
            },
            tooltip: {
               trigger: 'item',
               formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
               orient: 'vertical',
               left: 'left',
               data: data.names
            },
            series: [
               {
                  name: '客资成交',
                  type: 'pie',
                  radius: '55%',
                  center: ['50%', '60%'],
                  data: data.datas,
                  itemStyle: {
                     emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                     }
                  }
               }
            ]
         });
      });
   </script>
</block>


